<template>
  <div class="NavWrap">
    <ul>
      <li v-for="item in list" :key="item.path" @click="toPage(item.path)">
        {{ item.meta.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    list() {
      let routes = this.$router.options.routes;
      routes.shift();
      routes=routes.filter((item)=>!item.meta.hidden);
      return routes;
    },
  },
  methods: {
    toPage(path) {
      if (path == this.$route.path) return;
      this.$router.push(path);
    },
  },
};
</script>

<style lang="scss" scoped>
.NavWrap {
  width: 220px;
  background-color: rgb(101, 84, 104);
  height: calc(100vh - 80px);
  color: rgb(201, 172, 204);
  li {
    text-align: center;
    line-height: 50px;
    letter-spacing: 5px;
    cursor: pointer;
    color: rgb(102, 135, 211);
    &:hover {
      color: rgb(216, 130, 220);
    }
  }
}
</style>>
